import React from 'react'
import { Link } from 'react-router-dom'
import PropTyeps from 'prop-types'
import { withStyles } from 'material-ui/styles'

import style from './style'

import TopicTips from '../topic_tips/index'
import tabs from '../../constant/tabs'
import dateFormat from '../../util/date_format'

const TopicItem = (props) => {
  const { topic } = props
  const createAt = dateFormat(topic.create_at, 'yyyy-mm-dd hh:mm:ss')
  const lastReplyAt = dateFormat(topic.last_reply_at, 'yyyy-mm-dd hh:mm:ss')
  const tab = tabs[topic.tab]
  return (
    <div className={props.classes.topicItem}>
      <div className={props.classes.itemContainer}>
        <div className={props.classes.itemTop}>
          <div className={props.classes.avatar}>
            <Link to={`/user/${topic.author.loginname}`}>
              <img
                className={props.classes.avatarImg}
                src={topic.author.avatar_url}
                alt={topic.author.loginname}
              />
            </Link>
          </div>
          <div className={props.classes.author}>
            <span className={props.classes.nickName}>{topic.author.loginname}</span>
            <span className={props.classes.createTime}>发表于：{createAt}</span>
          </div>
          <div className={props.classes.tab}>
            {tab}
          </div>
        </div>
        <div className={props.classes.itemMid}>
          <h3 className={props.classes.topicTitle}>
            <Link className={props.classes.topicLink} to={`/topic-detail/${topic.id}`}>
              {topic.title}
            </Link>
          </h3>
          <div className={props.classes.imgList}>
            {
              topic.thumbnail.length ? topic.thumbnail.map(item => (
                <img src={item} alt={topic.title} key={item} className={props.classes.topicImg} />
              ))
              :
              null
            }
          </div>
        </div>
        <div className="bottom">
          <TopicTips
            tab={tab}
            lastReplyAt={lastReplyAt}
            replyCount={topic.reply_count}
            visitCount={topic.visit_count}
            top={topic.top}
            good={topic.good}
          />
        </div>
      </div>
    </div>
  )
}

export default withStyles(style)(TopicItem)

TopicItem.propTypes = {
  classes: PropTyeps.objectOf(Object),
  topic: PropTyeps.objectOf(Object),
}
